<template>
<h1>WatchEffect:不用指定监视的数据，自动监视你判断中的变化的数据</h1>
<h2>当前水温：{{temperature}}</h2>
<h2>当前水位：{{waterLevel}}</h2>
<button @click="temperature+=10">点我水温+10</button>
<button @click="waterLevel+=10">点我水位+10</button>

</template>
<script lang="ts">
export default {
    name:'WatchEffect'
}
</script>
<script setup lang="ts">
import { ref,watchEffect } from 'vue'
const temperature = ref(10)
const waterLevel = ref(10)

watchEffect(()=>{
    if(temperature.value>100||waterLevel.value>100){
        console.log('当前值:', temperature.value, waterLevel.value) // 添加这行查看实时值
        console.log('输出警告')
    }
})
</script>

<style>

</style>